import { View, Picker, Image, Map } from "@tarojs/components";
import {
  AtList,
  AtListItem,
  AtForm,
  AtInput,
  AtButton,
  AtMessage
} from "taro-ui";
import { useState } from "react";
import Taro, { useRouter } from "@tarojs/taro";
import { batchAddPointApi } from "../../utils/api";

import "./index.scss";

const selector = [
  {
    type: 1,
    title: "未启用"
  },
  {
    type: 2,
    title: "启用"
  }
];

const Index = () => {
  const id = useRouter().params.id;

  const [state, setState] = useState({
    name_prefix: "",
    count: 1,
    pointstate: {
      type: 1,
      title: "未启用"
    }
  });

  const prefixChange = value => {
    setState(state => ({
      ...state,
      name_prefix: value
    }));
  };

  const countChange = value => {
    setState(state => ({
      ...state,
      count: value
    }));
  };

  const changestate = e => {
    setState(state => ({
      ...state,
      pointstate: selector[e.detail.value]
    }));
  };

  const onSubmit = async () => {
    const res = await batchAddPointApi({
      project_id: id,
      name_prefix: state.name_prefix,
      count: state.count,
      state: state.pointstate.type
    });
    if (res.res === 0) {
      Taro.atMessage({
        message: "新增成功",
        type: "success"
      });
      Taro.navigateBack({
        delta: 1
      });
    } else {
      Taro.atMessage({
        message: res.msg,
        type: "warning"
      });
    }
  };

  return (
    <View className="batchadd">
      <AtForm>
        <AtInput
          required
          name="name"
          title="名称前缀"
          type="text"
          placeholder="请输入名称前缀"
          value={state.name_prefix}
          onChange={prefixChange}
        />

        <AtInput
          required
          name="count"
          title="布点数量"
          type="number"
          placeholder="请输入布点数量"
          value={state.count}
          onChange={countChange}
        />

        {/* <Picker
          mode="selector"
          range={selector}
          rangeKey="title"
          onChange={changestate}
        >
          <AtList>
            <AtListItem title="布点状态" extraText={state.pointstate.title} />
          </AtList>
        </Picker> */}

        <AtButton type="primary" onClick={onSubmit}>
          提交
        </AtButton>
      </AtForm>
      <AtMessage />
    </View>
  );
};

export default Index;
